<!DOCTYPE html>
<html>

<head>
    <style>
        img{
            /* width: 500px;
            height: 500px; */
            display: inline-block;
            /* max-width: 100%; */
            /* object-fit: fill; */
        }

        /* .picture {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        } */
    </style>
</head>

<body>
    <div>
        The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The
        entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if
        its aspect ratio does not match the aspect ratio of the box.
    </div>
    <div class="picture">
        <!-- <picture>
            <source media="(max-width: 600px)" srcset="./small.jpg">
            <source media="(min-width: 601px)" srcset="./big.jpg">
            <img  alt="The wondful picture.">
        </picture> -->
        <img srcset="small.jpg 480w,
                     big.jpg 1920w"
             sizes="(max-width: 600px) 450px,
                    (max-width: 800px) 800px"
             src="small.jpg"
             alt="this is a test">

    </div>

    <div>
        The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The
        entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if
        its aspect ratio does not match the aspect ratio of the box.
    </div>
</body>

</html>